import { defineComponent, PropType, ref, VNode } from 'vue';
import { CodeListItem, IModal } from '@ibiz-template/runtime';
import { useNamespace } from '@ibiz-template/vue3-util';
import './codelist-color-setting.scss';

export const CodelistColorSetting = defineComponent({
  name: 'IBizCodelistColorSetting',
  props: {
    modal: { type: Object as PropType<IModal>, required: true },
    taskColorOptions: {
      type: Object as PropType<{
        [p: string]: {
          taskColor: string;
          taskBgColor: string;
          taskAcitveBorderColor: string;
        };
      }>,
    },
    codeListItems: {
      type: Array as PropType<CodeListItem[]>,
    },
  },
  setup(props) {
    const ns = useNamespace('codelist-color-setting');

    // 颜色配置字段映射
    const colorFieldMap: IData = {
      taskColor: '字体颜色',
      taskBgColor: '背景颜色',
      taskAcitveBorderColor: '激活边框颜色',
    };

    // 折叠面板激活项
    const activeNames: Array<string | number> = [];

    // 颜色配置项集合
    const items = ref<IData[]>([]);

    // 初始化数据
    const initData = (): void => {
      const { taskColorOptions, codeListItems } = props;
      if (taskColorOptions && codeListItems) {
        items.value = codeListItems.map((item: CodeListItem) => {
          const { value, text } = item;
          activeNames.push(value);
          return {
            ...taskColorOptions[value],
            value,
            text,
          };
        });
      }
    };

    initData();

    // 格式化颜色配置数据
    const formatColorOptions = (): IData => {
      const taskColorOptions: IData = {};
      items.value.forEach((_item: IData) => {
        taskColorOptions[_item.value] = {
          taskColor: _item.taskColor,
          taskBgColor: _item.taskBgColor,
          taskAcitveBorderColor: _item.taskAcitveBorderColor,
        };
      });
      return taskColorOptions;
    };

    // 处理确认按钮点击
    const handleConfirm = (): void => {
      props.modal.dismiss({ ok: true, data: [formatColorOptions()] });
    };

    // 处理取消按钮点击
    const handleCancel = (): void => {
      props.modal.dismiss();
    };

    const onColorChange = (
      _filedName: string,
      _color: string,
      _item: IData,
    ): void => {
      items.value = items.value.map((_item2: IData) => {
        if (_item2.value === _item.value)
          Object.assign(_item2, { [_filedName]: _color });
        return _item2;
      });
    };

    // 绘制颜色设置项
    const renderColorSettingItem = (
      _filedName: string,
      _item: IData,
    ): VNode => {
      // eslint-disable-next-line prefer-const
      let colorValue: string = _item[_filedName];
      return (
        <div class={ns.e('collapse-item')}>
          <div class={ns.em('collapse-item', 'caption')}>
            {colorFieldMap[_filedName]}
          </div>
          <el-color-picker
            class={ns.em('collapse-item', 'color-picker')}
            v-model={colorValue}
            onChange={(_value: string) =>
              onColorChange(_filedName, _value, _item)
            }
          ></el-color-picker>
        </div>
      );
    };

    return {
      ns,
      items,
      colorFieldMap,
      activeNames,
      handleCancel,
      handleConfirm,
      renderColorSettingItem,
    };
  },
  render() {
    return (
      <div class={this.ns.b()}>
        <div class={this.ns.e('content')}>
          <el-collapse v-model={this.activeNames}>
            {this.items.map(_item => {
              return (
                <el-collapse-item title={_item.text} name={_item.value}>
                  {Object.keys(this.colorFieldMap).map(key =>
                    this.renderColorSettingItem(key, _item),
                  )}
                </el-collapse-item>
              );
            })}
          </el-collapse>
        </div>
        <div class={this.ns.e('footer')}>
          <el-button
            class={this.ns.em('footer', 'close')}
            text='plain'
            onClick={this.handleCancel}
          >
            {ibiz.i18n.t('app.cancel')}
          </el-button>

          <el-button
            class={this.ns.em('footer', 'confirm')}
            type='primary'
            onClick={this.handleConfirm}
          >
            {ibiz.i18n.t('app.confirm')}
          </el-button>
        </div>
      </div>
    );
  },
});
